<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="flex flex-center bg-white rounded-4 p-4 flex flex-center grid-gap-2">
				<view class="flex-1 flex flex-column grid-gap-4">
					<text class="font-weight-600 h8">当前可提现</text>
					<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="1"
						:money="USERINFO.channels_money" unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
					<view class="flex flex-y-center">
						<text class="h9 text-grey">冻结中：</text>
						<x-money type="warning-light-3" unit-type="warning-light-3" weight="bold" size="6"
							:money="USERINFO.channels_freeze_money" unit="">
							<template #prefix>
								<text class="h10 text-warning-light-3">￥</text>
							</template>
						</x-money>
					</view>
					<view class="flex flex-y-center">
						<text class="h9 text-grey">累计收益：</text>
						<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="6"
							:money="USERINFO.channels_money_sum" unit="">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
				</view>
				<view class="flex flex-center" @click="$page.open('/channels/pages/user/wallet/log', true)">
					<text class="text-grey h9">账单</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<view class="flex flex-column grid-gap-4 bg-white p-4 rounded-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h8 font-weight-600">收款账户</text>
				</view>
				<view class="flex flex-center rounded-4 p-4 grid-gap-2" @tap="showUserFinanceAccount = true"
					hover-class="bg">
					<image v-if="finance.icon" :src="finance.icon" style="width: 40px;height: 40px;" />
					<view class="flex-1 h9 font-weight-600" v-if="finance.name">{{ finance.bank }} {{ finance.name }}
					</view>
					<view class="flex-1 text-placeholder h9" v-else>请选择收款账户</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>

			<view class="flex flex-column grid-gap-4 bg-white p-4 rounded-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h8 font-weight-600">提现金额</text>
					<view class="flex h10 text-danger-light-3" v-if="WEBCONFIG.channels_withdrawal_fee > 0">
						<text>(提现费率：</text>
						<text>{{ WEBCONFIG.channels_withdrawal_fee }}%</text>
						<text>)</text>
					</view>
				</view>
				<view class="flex flex-center bg rounded-round px-6">
					<input type="digit" placeholder="请输入提现金额" class="p-4 flex-1 font-weight-600 h6 text-danger-light-3"
						v-model="form.money" maxlength="8">
					<text class="h9 font-weight-600 text-danger-light-3">元</text>
				</view>
				<view class="flex flex-center" v-if="form.money > 0">
					<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="1" :money="form.money"
						unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
			</view>

			<view class="flex flex-column grid-gap-2">
				<view class="flex flex-y-center">
					<text class="h9 text-grey">请阅读</text>
					<text class="h9 text-primary"
						@tap="$page.open('/pages/article/content?alias=withdrawal')">《提现须知》</text>
				</view>
			</view>
			<view class="flex">
				<button class="flex-1 btn-primary btn-round" @click="submit()">提现</button>
			</view>
		</view>
		<x-popup v-model="showUserFinanceAccount">
			<view class="bg px-4 py-10 flex flex-column grid-gap-4">
				<view class="bg-white rounded-4 p-4 flex flex-center grid-gap-2"
					@tap="selectedFinance(account.alipay_payment_code)">
					<image src="@/static/icons/account/alipay_payment_code.png" style="width:40px;height:40px;" />
					<view class="flex-1 h9 text-grey">支付宝收款码</view>
					<view class="h9 font-weight-600" v-if="account.alipay_payment_code.name">{{
						account.alipay_payment_code.name }}</view>
					<view class="h9 text-placeholder" v-else>去设置</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="bg-white rounded-4 p-4 flex flex-center grid-gap-2"
					@tap="selectedFinance(account.wechat_payment_code)">
					<image src="@/static/icons/account/wechat_payment_code.png" style="width:40px;height:40px;" />
					<view class="flex-1 h9 text-grey">微信收款码</view>
					<view class="h9 font-weight-600" v-if="account.wechat_payment_code.name">{{
						account.wechat_payment_code.name }}</view>
					<view class="h9 text-placeholder" v-else>去设置</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<!-- <view class="bg-white rounded-4 p-4 flex flex-center grid-gap-2"
                @tap="selectedFinance(account.wechat_transfer)">
                    <image src="@/static/icons/account/wechat_transfer.png" style="width:40px;height:40px;" />
                    <view class="flex-1 h9 text-grey">转账到微信零钱</view>
                    <view class="h9 font-weight-600" v-if="account.wechat_transfer.name">{{ account.wechat_transfer.name }}</view>
                    <view class="h9 text-placeholder" v-else>去设置</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
                </view> -->
				<view class="bg-white rounded-4 p-4 flex flex-center grid-gap-2"
					@tap="selectedFinance(account.bank_transfer)">
					<image src="@/static/icons/account/bank_transfer.png" style="width:40px;height:40px;" />
					<view class="flex-1 h9 text-grey">银行卡转账</view>
					<view class="h9 font-weight-600" v-if="account.bank_transfer.name">{{ account.bank_transfer.bank }}
						{{
							account.bank_transfer.name }}</view>
					<view class="h9 text-placeholder" v-else>去设置</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { $api, $message, useStorage,$page } from '@/utils';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const showUserFinanceAccount = ref(false);
const form = ref({
	channels: '',
	action: 'channels',
	money: ''
});
const finance = ref({});
const account = ref({
	alipay_payment_code: {
		channels: 'alipay_payment_code',
		name: '',
		mobile: '',
		qrcode: ''
	},
	wechat_payment_code: {
		channels: 'wechat_payment_code',
		name: '',
		mobile: '',
		qrcode: ''
	},
	wechat_transfer: {
		channels: 'wechat_transfer',
		name: '',
		mobile: ''
	},
	bank_transfer: {
		channels: 'bank_transfer',
		name: '',
		mobile: '',
		account: '',
		bank: ''
	},
});
const getAccount = () => {
	$api.UserFinanceAccount.index().then((data:any) => {
		for (const key in data) {
			if (Object.hasOwnProperty.call(data, key)) {
				const item = data[key];
				account.value[key] = item;
			}
		}
	}).catch((err:any) => {
		$message.error(err.msg);
	})
}
const selectedFinance = (channels:any) => {
	showUserFinanceAccount.value = false;
	if (channels.name) {
		form.value.channels = channels.channels;
		channels.icon = '/static/icons/account/' + channels.channels + '.png';
		finance.value = channels;
		useStorage().set('finance', channels);
	} else {
		form.value.channels = '';
		finance.value = {};
		useStorage().remove('finance');
		$page.open('/pages/user/finance/save?channels=' + channels.channels)
	}
}
const submit = () => {
	if (!form.value.money) { return }
	$api.Wallet.withdrawal(form.value)
		.then((res:any) => {
			$message.success(res.msg);
			$api.User.userinfo(true);
			setTimeout(() => {
				$page.back();
			}, 1000);
		}).catch((err:any) => {
			$message.error(err.msg);
		})
}
onLoad(() => {
	const finance = useStorage().get('finance');
	if (finance) {
		form.value.channels = finance.channels;
		finance.value = finance;
	}
})
onShow(() => {
	$api.User.userinfo(true);
	getAccount();
})
</script>

<style lang="scss" scoped>
.app-header {
	position: relative;
	overflow: hidden;

	.background-gradient {
		background-image: var(--header-bg-color);
		/* 渐变效果的颜色 */
		width: 100%;
		height: 230upx;
		/* 背景高度可根据需要进行调整 */
		border-bottom-left-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
		border-bottom-right-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
	}

	.balance {
		margin-top: -170upx;

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.money {
				font-size: 50upx;
			}

		}
	}
}

.item.crow {
	background-color: #FFFFFF;
	padding: 44rpx;
}

.crow {
	justify-content: space-between;
	padding: 15upx;

	.icon {
		width: 60rpx;
		height: 60rpx;
	}

	.input {
		font-size: 36px;
		font-weight: bold;
		padding: 10px 20px;
	}

	.right {
		flex: 1;
	}
}
</style>
